<template>
    <div>
        <div class="content">
            <h4>{{title}}</h4>
            <p>{{remark}}</p>
            <pre class="pre-content">{{content}}</pre>
            <button type="button" class="close btn-close" @click="$emit('close')">&times;</button>
        </div>
        <div class="cover"></div>
    </div>
</template>

<script>
export default {
    name: "infoView",
    props: {
        title: {
            type: String,
            default: ""
        },
        remark: {
            type: String,
            default: ""
        },
        content: {
            type: [String, Number, Boolean, Object, Array],
            required: true
        }
    },
    data() {
        return {
            //
        };
    }
};
</script>

<style scoped>
.cover {
    position: fixed;
    z-index: 1080;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.5);
    touch-action: none;
}
.content {
    position: fixed;
    width: 75%;
    height: auto;
    top: 15%;
    left: 12.5%;
    z-index: 1081;
    background: #fff;
    border: #aaa 1px solid;
    border-radius: 1em;
    box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.5);
    padding: 1em;
    touch-action: none;
}
.pre-content {
    position: relative;
    height: 50vh;
    overflow: auto;
    border: lightgrey 1px solid;
    padding: 1em;
}
.btn-close {
    position: absolute;
    right: 0.5em;
    top: 0.4em;
}
</style>